<template>
    <div class="cart">
        <CartPopup v-model="showPopup" />
        <div class="body row">
            <div class="price row">
                <div class="cart-body row" @click="switchCartPopup">
                    <div class="icon">
                        <img :src="require('@/assets/icon/cart_body.png')" />
                    </div>
                    <span>购物车</span>
                    <span class="count">{{ cartCount }}</span>
                </div>
                <div class="num">￥{{ cartPricePay }}</div>
            </div>
            <div class="btn-create-order" @click="toOrderInitPage">结算</div>
        </div>
    </div>
</template>

<script>
import CartPopup from "./cartPopup";
export default {
    components: {
        CartPopup
    },
    data() {
        return {
            showPopup: false
        };
    },
    computed: {
        cartPricePay() {
            const cartMapList = this.$store.getters.cartMapList;
            let pricePay = 0;
            cartMapList.map(i => {
                pricePay += i.pricePay;
            });
            return pricePay;
        },
        cartCount() {
            return this.$store.state.cartList.length;
        }
    },

    methods: {
        switchCartPopup() {
            this.showPopup = !this.showPopup;
        },
        toOrderInitPage() {
            if (this.$store.state.cartList.length > 0) {
                this.$router.push({
                    path: "/orderInit"
                });
            }
        }
    }
};
</script>


<style lang="less" scoped>
.cart {
    .body {
        position: fixed;
        z-index: 1100;
        bottom: 110px;
        width: 100%;
        height: 100px;
        line-height: 100px;
        background: #e6e6e6;
        color: #3d3d3d;

        justify-content: space-between;

        .price {
            padding: 0 30px;
            flex: 1 1 auto;
            justify-content: space-between;

            .cart-body {
                position: relative;
                font-size: 26px;
                padding: 0 30px;
                height: 80px;
                line-height: 80px;
                background: #fff;
                border-radius: 40px;
                transform: translateY(-10px);
                box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
                align-items: center;

                .icon {
                    width: 60px;
                    height: 60px;
                    margin-right: 15px;
                }

                .count {
                    display: inline-block;
                    color: #f00;
                    font-weight: 600;
                    margin-left: 10px;
                }
            }
            .num {
                color: #000;
                font-weight: 500;
                font-size: 38px;
            }
        }

        .btn-create-order {
            background: #ffc031;
            color: #fff;
            font-weight: 500;
            font-size: 36px;
            padding: 0 60px;
        }
    }
}
</style>